<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>web12-1</title>
        <meta name="author" content="Choongang31" />
        <style>
            #canvas{border-width:1px;
                    border-style:dotted;
                    border-color:black;
                    width:1200px;
                    height:800px;
            }
        </style>
        <script>
        var ctx;  //전역변수로 선언 
            window.onload=function(){
                console.log("시작 ");
                document.getElementById("canvas");
                ctx=canvas.getContext("2d");
                if(ctx==null){
                    alert("canvas를 지원하지 않습니다.");
                    return;
                }
                    console.log("canvas를 지원합니다.");
                    //fill 채우는 style 스타일로 black 컬러 
                    ctx.fillStyle="black";
                    // x좌표,  y좌표,  가로길이,  세로길이     왼쪽 위가(0,0) 
                    ctx.fillRect(10,10,10,10);
                    ctx.fillRect(30,10,10,10);
                    ctx.fillStyle="gray";
                    ctx.fillRect(50,10,10*2,10);
                    ctx.fillStyle="rgb(50,200,30)";
                    ctx.fillRect(80,10,10*2,10);
                    for(i=0;i<15;i++){
                        ctx.fillRect(i*20,30,i,10);
                    }          
                    canvasWidth=canvas.width;
                    backWidth=back.width;
                    console.log("캔버스길이:",canvasWidth);
                    console.log("배경의길이:",backWidth);
             }       
             
           
                    var x=10,y=50;  //주인공의 위치 
                    var backx=0, backy=0;  //배경의 위치 
                    var goRightBack=false;//배경의 이동방향 왼쪽
                    var backWidth; //배경의 가로길이  
                    var canvasWidth;
                    var goRight=true;
                    var back=new Image(); //배경 
                    back.src="City.jpg"; //배경 그림 셋팅 
                    
                    
                    function nemo(){    
                        //배경 
                        //drawImage(image sx,sy,swidth,sheight,dx,dy,)
                        
                        //배경의 위치 셋팅 하기
                        // 배경의 가로가 1000 캔버스 가로가 200
                        //배경의 x가 -800 일때 처음으로 돌려야 합니다.
                        //if(  -801*(-1)  >  1000-200 )
                        if(backx*(-1) > backWidth-canvasWidth){
                            backx=0;
                        }
                       backx-=20;//항상 오른쪽으로만 이동 
                        
                        ctx.drawImage(back,backx,-200);  //배경 그림 
                        
                       // ctx.fillStyle="white";
                       // ctx.fillRect(0,0,400,400); 
                           
                        
                        if(x>canvasWidth){//캐릭터가 화면 우측으로 나감 
                            goRight=false;
                        }else if(x<0){//캐릭터가 왼쪽으로 나감 
                            goRight=true;
                        }
                        //캐릭터 이동 위치 
                        if(goRight)    x+=10;
                        else           x-=10;
                       
                        //0~255까지의 정수가 return 됩니다.
                       r=Math.ceil(Math.random()*255);
                       g=Math.ceil(Math.random()*255);
                            console.log("r",r);
                            ctx.fillStyle="rgb("+r+","+g+",50)";
                            ctx.fillRect(x,y,10,r/2);                     
                    }
                    function nemoDraw(){
                        //네모를 0.1초마다 호출해라 
                        setInterval(nemo,100);
                    }
                    
            
        </script>
    </head>
    <body>
        <h3>그림그리기 </h3>
        <button onclick="nemoDraw()">네모 움직이기 </button>
        <canvas id="canvas">
            
        </canvas>
        
        
    </body>
</html>

